<!DOCTYPE html>
<!-- saved from url=(0030)http://bootswatch.com/cosmo/?# -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Bootswatch: Cosmo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An ode to Metro.">
    <meta name="author" content="Thomas Park">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href="http://bootswatch.com/cosmo/bootstrap.min.css" rel="stylesheet">
    <link href="http://bootswatch.com/default/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://bootswatch.com/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://bootswatch.com/css/bootswatch.css" rel="stylesheet">

   <script type="text/javascript" async="" src="./Bootswatch  Cosmo_files/ga.js"></script><script type="text/javascript">

     var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23019901-1']);
      _gaq.push(['_setDomainName', "bootswatch.com"]);
        _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

     (function() {
       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();

   </script>

  <script type="text/javascript" async="" src="./Bootswatch  Cosmo_files/bsa.js"></script><script type="text/javascript" id="_bsap_js_c466df00a3cd5ee8568b5c4983b6bb19" src="./Bootswatch  Cosmo_files/s_c466df00a3cd5ee8568b5c4983b6bb19.js" async="async"></script><style type="text/css" id="bsa_css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}</style></head>

  <body class="preview" id="top" data-spy="scroll" data-target=".subnav" data-offset="80" style="margin-top: 36px;">
    <script src="./Bootswatch  Cosmo_files/bsa(1).js"></script>


  <!-- Navbar
    ================================================== -->
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </a>
       <a class="brand" href="http://bootswatch.com/">Bootswatch</a>
       <div class="nav-collapse collapse" id="main-menu">
        <ul class="nav" id="main-menu-left">
          <li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com/">News</a></li>
          <li><a id="swatch-link" href="http://bootswatch.com/#gallery">Gallery</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Preview <b class="caret"></b></a>
            <ul class="dropdown-menu" id="swatch-menu">
              <li><a href="http://bootswatch.com/default/">Default</a></li>
              <li class="divider"></li>
              <li><a href="http://bootswatch.com/amelia/">Amelia</a></li>
              <li><a href="http://bootswatch.com/cerulean/">Cerulean</a></li>
              <li><a href="http://bootswatch.com/cosmo/">Cosmo</a></li>
              <li><a href="http://bootswatch.com/cyborg/">Cyborg</a></li>
              <li><a href="http://bootswatch.com/flatly/">Flatly</a></li>
              <li><a href="http://bootswatch.com/journal/">Journal</a></li>
              <li><a href="http://bootswatch.com/readable/">Readable</a></li>
              <li><a href="http://bootswatch.com/simplex/">Simplex</a></li>
              <li><a href="http://bootswatch.com/slate/">Slate</a></li>
              <li><a href="http://bootswatch.com/spacelab/">Spacelab</a></li>
              <li><a href="http://bootswatch.com/spruce/">Spruce</a></li>
              <li><a href="http://bootswatch.com/superhero/">Superhero</a></li>
              <li><a href="http://bootswatch.com/united/">United</a></li>
            </ul>
          </li>
          <li class="dropdown" id="preview-menu">
            <a class="dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Download <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a target="_blank" href="http://bootswatch.com/cosmo/bootstrap.min.css">bootstrap.min.css</a></li>
              <li><a target="_blank" href="http://bootswatch.com/cosmo/bootstrap.css">bootstrap.css</a></li>
              <li class="divider"></li>
              <li><a target="_blank" href="http://bootswatch.com/cosmo/variables.less">variables.less</a></li>
              <li><a target="_blank" href="http://bootswatch.com/cosmo/bootswatch.less">bootswatch.less</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav pull-right" id="main-menu-right">
          <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="" onclick="_gaq.push([&#39;_trackEvent&#39;, &#39;click&#39;, &#39;outbound&#39;, &#39;builtwithbootstrap&#39;]);" data-original-title="Showcase of Bootstrap sites &amp; apps">Built With Bootstrap <i class="icon-share-alt"></i></a></li>
          <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="" onclick="_gaq.push([&#39;_trackEvent&#39;, &#39;click&#39;, &#39;outbound&#39;, &#39;wrapbootstrap&#39;]);" data-original-title="Marketplace for premium Bootstrap templates">WrapBootstrap <i class="icon-share-alt"></i></a></li>
        </ul>
       </div>
     </div>
   </div>
 </div>

    <div class="container">


<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="row">
    <div class="span6">
      <h1>Cosmo</h1>
      <p class="lead">An ode to Metro.</p>
    </div>
    <div class="span6">
      <div class="bsa well">
          <div id="bsap_1277971" class="bsap_1277971 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_2634655"><a href="http://stats.buysellads.com/click.go?z=1277971&b=2634655&g=&s=&sw=1280&sh=1024&br=chrome,27,win&r=0.9638832700438797&link=http://www.campaignmonitor.com/?f6" onmouseover="window.status = &#39;http://www.campaignmonitor.com/?f6&#39;; return true;" onmouseout="window.status=&#39;&#39;; return true;" target="_blank"><span class="bsa_it_i"><img src="./Bootswatch  Cosmo_files/163329-1363814580.png" width="130" height="100" alt="Campaign Monitor"></span></a><a href="http://stats.buysellads.com/click.go?z=1277971&b=2634655&g=&s=&sw=1280&sh=1024&br=chrome,27,win&r=0.8535096056293696&link=http://www.campaignmonitor.com/?f6" onmouseover="window.status = &#39;http://www.campaignmonitor.com/?f6&#39;; return true;" onmouseout="window.status=&#39;&#39;; return true;" target="_blank"><span class="bsa_it_t">Campaign Monitor</span><span class="bsa_it_d">Send something beautiful</span></a><div style="clear:both"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/149435/zone/1277971?utm_source=site_149435&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1277971">ads by BSA</a></span></div></div>
      </div>
    </div>
  </div>
  <div class="subnav subnav-fixed">
    <ul class="nav nav-pills">
      <li class="active"><a href="http://bootswatch.com/cosmo/?#typography">Typography</a></li>
      <li class=""><a href="http://bootswatch.com/cosmo/?#navbar">Navbar</a></li>
      <li class=""><a href="http://bootswatch.com/cosmo/?#buttons">Buttons</a></li>
      <li class=""><a href="http://bootswatch.com/cosmo/?#forms">Forms</a></li>
      <li class=""><a href="http://bootswatch.com/cosmo/?#tables">Tables</a></li>
      <li class=""><a href="http://bootswatch.com/cosmo/?#miscellaneous">Miscellaneous</a></li>
    </ul>
  </div>
</header>




<!-- Typography
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>Typography</h1>
  </div>

  <!-- Headings & Paragraph Copy -->
  <div class="row">

    <div class="span4">
      <div class="well">
        <h1>h1. Heading 1</h1>
        <h2>h2. Heading 2</h2>
        <h3>h3. Heading 3</h3>
        <h4>h4. Heading 4</h4>
        <h5>h5. Heading 5</h5>
        <h6>h6. Heading 6</h6>
      </div>
    </div>

    <div class="span4">
      <h3>Example body text</h3>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
    </div>

    <div class="span4">
      <h3>Example addresses</h3>
      <address>
        <strong>Twitter, Inc.</strong><br>
        795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
      </address>
      <address>
        <strong>Full Name</strong><br>
        <a href="mailto:#">first.last@gmail.com</a>
      </address>
    </div>

  </div>
  
  <div class="row">
    <div class="span6">
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
      </blockquote>
    </div>
    <div class="span6">
      <blockquote class="pull-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
      </blockquote>
    </div>
  </div>

</section>


<!-- Navbar
================================================== -->
<section id="navbar">
  <div class="page-header">
    <h1>Navbars</h1>
  </div>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container" style="width: auto;">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Home</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li class="dropdown">
              <a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <ul class="nav pull-right">
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->

  <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <div class="container" style="width: auto;">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Home</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li class="dropdown open">
              <a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <ul class="nav pull-right">
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->

</section>



<!-- Buttons
================================================== -->
<section id="buttons">
  <div class="page-header">
    <h1>Buttons</h1>
  </div>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Button</th>
        <th>Large Button</th>
        <th>Small Button</th>
        <th>Disabled Button</th>
    <th>Button with Icon</th>
    <th>Split Button</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a class="btn" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Default</a></td>
        <td><a class="btn btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Default</a></td>
        <td><a class="btn btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Default</a></td>
        <td><a class="btn disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Default</a></td>
        <td><a class="btn" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-cog"></i> Default</a></td>
    <td>
          <div class="btn-group">
            <a class="btn" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Default</a>
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-primary" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Primary</a></td>
        <td><a class="btn btn-primary btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Primary</a></td>
        <td><a class="btn btn-primary btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Primary</a></td>
        <td><a class="btn btn-primary disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Primary</a></td>
        <td><a class="btn btn-primary" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-primary" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Primary</a>
            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-info" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Info</a></td>
        <td><a class="btn btn-info btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Info</a></td>
        <td><a class="btn btn-info btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Info</a></td>
        <td><a class="btn btn-info disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Info</a></td>
        <td><a class="btn btn-info" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-info" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Info</a>
            <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-success" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Success</a></td>
        <td><a class="btn btn-success btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Success</a></td>
        <td><a class="btn btn-success btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Success</a></td>
        <td><a class="btn btn-success disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Success</a></td>
        <td><a class="btn btn-success" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-ok icon-white"></i> Success</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-success" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Success</a>
            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-warning" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Warning</a></td>
        <td><a class="btn btn-warning btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Warning</a></td>
        <td><a class="btn btn-warning btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Warning</a></td>
        <td><a class="btn btn-warning disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Warning</a></td>
        <td><a class="btn btn-warning" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-warning" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Warning</a>
            <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-danger" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Danger</a></td>
        <td><a class="btn btn-danger btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Danger</a></td>
        <td><a class="btn btn-danger btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Danger</a></td>
        <td><a class="btn btn-danger disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Danger</a></td>
        <td><a class="btn btn-danger" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-remove icon-white"></i> Danger</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-danger" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Danger</a>
            <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
      <tr>
        <td><a class="btn btn-inverse" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Inverse</a></td>
        <td><a class="btn btn-inverse btn-large" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Inverse</a></td>
        <td><a class="btn btn-inverse btn-small" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Inverse</a></td>
        <td><a class="btn btn-inverse disabled" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Inverse</a></td>
        <td><a class="btn btn-inverse" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><i class="icon-random icon-white"></i> Inverse</a></td>
    <td>
          <div class="btn-group">
            <a class="btn btn-inverse" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Inverse</a>
            <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html"><span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
            </ul>
          </div><!-- /btn-group -->
    </td>
      </tr>
    </tbody>
  </table>

</section>


<!-- Forms
================================================== -->
<section id="forms">
  <div class="page-header">
    <h1>Forms</h1>
  </div>

  <div class="row">
    <div class="span10 offset1">

      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn">Search</button>
      </form>

        <form class="well form-search">
          <input type="text" class="input-small" placeholder="Email">
          <input type="password" class="input-small" placeholder="Password">
          <button type="submit" class="btn">Go</button>
        </form>


      <form class="form-horizontal well">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Focused input</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">Uneditable input</label>
            <div class="controls">
              <span class="input-xlarge uneditable-input">Some value here</span>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="disabledInput">Disabled input</label>
            <div class="controls">
              <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled="">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox2" value="option1" disabled="">
                This is a disabled checkbox
              </label>
            </div>
          </div>
          <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
          <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="control-group info">
            <label class="control-label" for="selectError">Select with info</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Woohoo!</span>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button type="reset" class="btn">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

</section>

<!-- Tables
================================================== -->
<section id="tables">
  <div class="page-header">
    <h1>Tables</h1>
  </div>
  
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</section>


<!-- Miscellaneous
================================================== -->
<section id="miscellaneous">
  <div class="page-header">
    <h1>Miscellaneous</h1>
  </div>

  <div class="row">
    <div class="span4">

      <h3 id="breadcrumbs">Breadcrumbs</h3>
      <ul class="breadcrumb">
        <li class="active">Home</li>
      </ul>
      <ul class="breadcrumb">
        <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Home</a> <span class="divider">/</span></li>
        <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Library</a> <span class="divider">/</span></li>
        <li class="active">Data</li>
      </ul>
    </div>
    <div class="span4">
      <h3 id="pagination">Pagination</h3>
      <div class="pagination">
        <ul>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">←</a></li>
          <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">10</a></li>
          <li class="disabled"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">...</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">20</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">→</a></li>
        </ul>
      </div>
      <div class="pagination pagination-centered">
        <ul>
          <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">1</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">2</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">3</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">4</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">5</a></li>
        </ul>
      </div>
    </div>
    
    <div class="span4">
      <h3 id="pager">Pagers</h3>
        
        <ul class="pager">
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Previous</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Next</a></li>
        </ul>
        
        <ul class="pager">
          <li class="previous disabled"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">← Older</a></li>
          <li class="next"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Newer →</a></li>
        </ul>
    </div>
  </div>


  <!-- Navs
  ================================================== -->

  <div class="row">
    <div class="span4">

      <h3 id="tabs">Tabs</h3>
      <ul class="nav nav-tabs">
        <li class=""><a href="http://bootswatch.com/cosmo/?#A" data-toggle="tab">Section 1</a></li>
        <li class="active"><a href="http://bootswatch.com/cosmo/?#B" data-toggle="tab">Section 2</a></li>
        <li class="disabled"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html" data-toggle="tab">Section 3</a></li>
      </ul>
      <div class="tabbable">
        <div class="tab-content">
          <div class="tab-pane" id="A">
            <p>I'm in Section A.</p>
          </div>
          <div class="tab-pane active" id="B">
            <p>Howdy, I'm in Section B.</p>
          </div>
          <div class="tab-pane" id="C">
            <p>What up girl, this is Section C.</p>
          </div>
        </div>
      </div> <!-- /tabbable -->
      
    </div>
    <div class="span4">
      <h3 id="pills">Pills</h3>
      <ul class="nav nav-pills">
        <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Home</a></li>
        <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Profile</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Action</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Another action</a></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Separated link</a></li>
          </ul>
        </li>
        <li class="disabled"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Disabled link</a></li>
      </ul>
    </div>
    
    <div class="span4">
      
      <h3 id="list">Lists</h3>
        
      <div class="well" style="padding: 8px 0;">
        <ul class="nav nav-list">
          <li class="nav-header">List header</li>
          <li class="active"><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Home</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Library</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Applications</a></li>
          <li class="nav-header">Another list header</li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Profile</a></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Settings</a></li>
          <li class="divider"></li>
          <li><a href="./Bootswatch  Cosmo_files/Bootswatch  Cosmo.html">Help</a></li>
        </ul>
      </div>
    </div>
  </div>


<!-- Labels
================================================== -->

  <div class="row">
    <div class="span6">
      <h3 id="labels">Labels</h3>
      <span class="label">Default</span>
      <span class="label label-success">Success</span>
      <span class="label label-warning">Warning</span>
      <span class="label label-important">Important</span>
      <span class="label label-info">Info</span>
      <span class="label label-inverse">Inverse</span>
    </div>
    <div class="span6">
      <h3 id="badges">Badges</h3>
      <span class="badge">Default</span>
      <span class="badge badge-success">Success</span>
      <span class="badge badge-warning">Warning</span>
      <span class="badge badge-important">Important</span>
      <span class="badge badge-info">Info</span>
      <span class="badge badge-inverse">Inverse</span>
    </div>
  </div>
  <br>

<!-- Progress bars
================================================== -->


  <h3 id="progressbars">Progress bars</h3>

  <div class="row">
    <div class="span4">
      <div class="progress">
        <div class="bar" style="width: 60%;"></div>
      </div>
    </div>
    <div class="span4">
      <div class="progress progress-info progress-striped">
        <div class="bar" style="width: 20%;"></div>
      </div>
    </div>
    <div class="span4">
      <div class="progress progress-danger progress-striped active">
        <div class="bar" style="width: 45%"></div>
      </div>
    </div>
  </div>
  <br>


<!-- Alerts & Messages
================================================== -->


  <h3 id="alerts">Alerts</h3>

  <div class="row">
    <div class="span12">
        <div class="alert alert-block">
          <a class="close">×</a>
          <h4 class="alert-heading">Alert block</h4>
          <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        </div>
    </div>
  </div>
  <div class="row">
    <div class="span4">
      <div class="alert alert-error">
        <a class="close">×</a>
        <strong>Error</strong> Change a few things up and try submitting again.
      </div>
    </div>
    <div class="span4">
      <div class="alert alert-success">
        <a class="close">×</a>
        <strong>Success</strong> You successfully read this important alert message.
      </div>
    </div>
    <div class="span4">
      <div class="alert alert-info">
        <a class="close">×</a>
        <strong>Information</strong> This alert needs your attention, but it's not super important.
      </div>
    </div>
  </div>


</section>

<br><br><br><br>

     <!-- Footer
      ================================================== -->
      <hr>

      <footer id="footer">
        <p class="pull-right"><a href="http://bootswatch.com/cosmo/?#top">Back to top</a></p>
        <div class="links">
          <a href="http://news.bootswatch.com/" onclick="pageTracker._link(this.href); return false;">Blog</a>
          <a href="http://feeds.feedburner.com/bootswatch">RSS</a>
          <a href="https://twitter.com/thomashpark">Twitter</a>
          <a href="https://github.com/thomaspark/bootswatch/">GitHub</a>
          <a rel="tooltip" href="javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f%3De.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc%3Da.createElement(%22script%22)%3Bc.type%3D%22text/javascript%22%3Bc.src%3D%22http://ajax.googleapis.com/ajax/libs/jquery/%22%2Bg%2B%22/jquery.min.js%22%3Bc.onload%3Dc.onreadystatechange%3Dfunction()%7Bif(!b%26%26(!(d%3Dthis.readyState)%7C%7Cd%3D%3D%22loaded%22%7C%7Cd%3D%3D%22complete%22))%7Bh((f%3De.jQuery).noConflict(1),b%3D1)%3Bf(c).remove()%7D%7D%3Ba.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function(%24,L)%7Bif(%24(%22.bootswatcher%22)%5B0%5D)%7B%24(%22.bootswatcher%22).remove()%7Delse%7Bvar%20%24e%3D%24(%27%3Cselect%20class%3D%22bootswatcher%22%3E%3Coption%3EAmelia%3C/option%3E%3Coption%3ECerulean%3C/option%3E%3Coption%3ECosmo%3C/option%3E%3Coption%3ECyborg%3C/option%3E%3Coption%3EJournal%3C/option%3E%3Coption%3EReadable%3C/option%3E%3Coption%3ESimplex%3C/option%3E%3Coption%3ESlate%3C/option%3E%3Coption%3ESpacelab%3C/option%3E%3Coption%3ESpruce%3C/option%3E%3Coption%3ESuperhero%3C/option%3E%3Coption%3EUnited%3C/option%3E%3C/select%3E%27)%3Bvar%20l%3D1%2BMath.floor(Math.random()*%24e.children().length)%3B%24e.css(%7B%22z-index%22:%2299999%22,position:%22fixed%22,top:%225px%22,right:%225px%22,opacity:%220.5%22%7D).hover(function()%7B%24(this).css(%22opacity%22,%221%22)%7D,function()%7B%24(this).css(%22opacity%22,%220.5%22)%7D).change(function()%7Bif(!%24(%22link.bootswatcher%22)%5B0%5D)%7B%24(%22head%22).append(%27%3Clink%20rel%3D%22stylesheet%22%20class%3D%22bootswatcher%22%3E%27)%7D%24(%22link.bootswatcher%22).attr(%22href%22,%22http://bootswatch.com/%22%2B%24(this).find(%22:selected%22).text().toLowerCase()%2B%22/bootstrap.min.css%22)%7D).find(%22option:nth-child(%22%2Bl%2B%22)%22).attr(%22selected%22,%22selected%22).end().trigger(%22change%22)%3B%24(%22body%22).append(%24e)%7D%3B%7D)%3B" title="" data-original-title="Drag to your bookmarks bar">Bookmarklet</a>
          <a href="https://github.com/thomaspark/bootswatch/tree/gh-pages/swatchmaker">Swatchmaker</a>
          <a href="http://news.bootswatch.com/post/22193315172/bootswatch-api">API</a>
          <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=F22JEM3Q78JC2">Donate</a>
        </div>
        Made by <a href="http://thomaspark.me/">Thomas Park</a>. Contact him <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.<br>
        Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.<br>
        Based on <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Hosted on <a href="http://pages.github.com/">GitHub</a>. Icons from <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller">Gerald Hiller</a>.<p></p>
      </footer>

    </div><!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./Bootswatch  Cosmo_files/jquery.min.js"></script>
    <script src="./Bootswatch  Cosmo_files/jquery.smooth-scroll.min.js"></script>
    <script src="./Bootswatch  Cosmo_files/bootstrap.min.js"></script>
    <script src="./Bootswatch  Cosmo_files/bootswatch.js"></script>


  

</body></html>